import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { useTags } from 'hooks/useTags';
import { Layout } from 'components/Layout';
import { Icon } from 'components/Icon';
import { Button } from 'components/Button';
import { Center } from 'components/Center';
import { Space } from 'components/Space';

const TagList = styled.ol`
  font-size: 16px;
  background: #fff;
  padding: 0 16px;
  > li {
    border-bottom: 1px solid #e5e5e7;
    &:last-child {
      border-bottom: none;
    }
    > a {
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
`;

export default function Tags() {
  const { tags, addTag } = useTags();
  return (
    <Layout>
      <TagList>
        {tags.map(tag => (
          <li key={tag.id}>
            <Link to={'/tags/' + tag.id}>
              <span className="oneLine">{tag.name}</span>
              <Icon name="right" />
            </Link>
          </li>
        ))}
      </TagList>
      <Center>
        <Space />
        <Space />
        <Button onClick={addTag}>新增标签</Button>
        <Space />
        <Space />
      </Center>
    </Layout>
  );
}
